<template>
  <div class="background">
      <div class="attch">

        <div class="form-group">
          <label for="bdp" class="bdp">问题简述</label>
          <textarea 
            class="bdpp" 
            id="bdpp" 
            style="resize:none" 
            v-model="title"
          ></textarea>
        </div>
    
        <div class="form-group">
          <label for="Attachment" class="att">问题描述与附件</label>
          <textarea 
            class="attp" 
            id="attp"
            style="resize:none" 
            v-model="content"
          ></textarea>
        </div>

        <div class="form-group">
          <input type="file" @change="handleFileChange" class="file"/>
          <button @click="submitFile" :disabled="!file" class="submitFilebutton">上传文件</button>
          <p v-if="uploadStatus">{{ uploadStatus }}</p>
        </div>
        
        <div class="form-group">
          <button class="submit" @click="submit">提交</button>
        </div>
          
      </div>
  </div>
  </template>
  
<script>
import { uploadfile,feedback_knowledge } from '@/api/feedback.js'; // 导入上传函数
import { useInfoStore } from '@/store/modules/user.js'
import { computed } from 'vue';
export default {
  data() {
    return {
      title:'',
      content:'',
      selectedFile: null,
      fileUrl: '',
      file_id:'',
      file: null,          // 初始化 file
      uploadStatus: '',    // 初始化 uploadStatus
    };
  },
  methods: {
    handleFileChange(event) {
      console.log("file input change");
      this.file=event.target.files[0];
    },
    async submitFile() {
      if (!this.file) {
        alert('Please select a file first.');
        return;
      }
      const formData = new FormData();
      formData.append('file', this.file);
      try {
        const response = await uploadfile(formData);
        console.log(response)
        if (response.status_code === 200) {
          this.file_id=response.data.file_id;
          console.log('上传成功');
          alert('上传成功！');
        }
        else{
          alert('上传失败请重试！');
        }
      } catch (error) {
        console.error('Error uploading file:', error);
      }
    },
    async submit(){
      const infoStore = useInfoStore();
      const userinfo = computed(() => infoStore.getUserInfo());
      const username = userinfo.value ? userinfo.value.username : '';
      const data = {
        username: username, 
        title:this.title,
        content:this.content,
        file_id:this.file_id
      };
      try {
        const response = await feedback_knowledge(data);
        console.log('反馈提交成功:', response.status_code);
      } catch (error) {
        console.error('反馈提交失败:', error.message);
      }
    } 
  }
};
</script>

<style scoped>

.background {  
  background-image: url(../../../assets/feedback/knowledge.png);  
  background-size: cover; /* 背景图覆盖整个容器，但保持其比例，可能会被裁剪 */  
  background-position: center; /* 背景图在容器中居中显示 */  
  background-repeat: no-repeat; /* 不重复背景图 */  
  width: 100%; /* 容器宽度 */  
  height: 100%; /* 容器高度，确保与父元素或视口相匹配 */  
  position: relative; /* 设置相对定位，以便子元素可以使用绝对定位 */  
  display: flex; /* 使用flex布局来对齐子元素 */  
  align-items: center; /* 在交叉轴（垂直方向，如果flex方向是行）上居中对齐子元素 */  
  justify-content: center; /* 在主轴（水平方向，如果flex方向是行）上居中对齐子元素，可选 */  
  background-color: rgba(255, 255, 255, 0.7);
  padding: 20px;
}
.form-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 4.5vh;
  margin-left: 0vw;
}
.bdp{
  margin-top: 5vh;
  margin-left: 15vw;
}
.bdpp{
   display: inline-block; /* 或者使用 flex */
   width: 50vw; 
   height: 6vh; 
   margin-top: 5vh;
   margin-left: 6vw; 
   vertical-align: top; /* 使输入框垂直对齐顶部 */
   background-color: #f3f3f3; /* 设置背景颜色 */
   font-size: 25px;
   color:black;
   opacity: 0.7;
}
.att{
  margin-top: 5vh;
  margin-left: 13vw;
}
.attp{
   display: inline-block; /* 或者使用 flex */
   width: 50vw; 
   height: 35vh;
   margin-top: 5vh;
   margin-left: 3.5vw; 
   vertical-align: top; /* 使输入框垂直对齐顶部 */
   background-color: #f3f3f3; /* 设置背景颜色 */
   font-size: 25px;
   color:black;
   opacity: 0.7;
}

label {
    color: #e8f0f8;
    font-family: "Inter", sans-serif; /* 设置字体 */
    font-weight: 400; /* 设置字体粗细 */
    font-size: 32px; /* 设置字体大小 */
    line-height: 38.73px; /* 设置行高 */
}
.attch{
  width: 100vw;
  height: 100vh;
  margin:auto;
}
.subfile{
  font-family:'Courier New', Courier, monospace;
  margin-top: 4vh;
  margin-left: 28vw;
  font-size: 1.5vw;
  text-align: center; 
  color:black;
  opacity: 0.7;
}
.file{
  margin-top: 4vh;
  margin-left: 28vw;
  width: 10vw;
  font-size: 20px;
  opacity: 0.7;
}
.submitFilebutton{
  margin-top: 4vh;
  width: 5vw;
  font-size: 20px;
  opacity: 0.7;
}
.submit {
    /* width: 250px; */
    width:15vw;
    height: 6vh;
    margin-top: 15vh;
    margin-left:18vw;
    background: #faedd6;
    border-radius: 8px;
    color: #484444;
    display:block;
    margin:0 auto;
    font-size: 25px;
    opacity: 0.7;
}
  </style>
  
  